<template>
  <view class="container">
    <!-- 顶部导航 -->
    <uni-nav-bar title="健康档案" left-icon="back" @clickLeft="back"></uni-nav-bar>

    <!-- 用户基本信息卡片 -->
    <view class="user-info-card">
      <view class="profile-header">
        <view class="avatar">
          <image src="https://q2.itc.cn/q_70/images03/20250225/e8117dd40aae4db5a64461f1ea0d16fc.jpeg"></image>
        </view>
        <view class="user-details">
          <text class="user-name">{{ userInfo.username || '未登录' }}</text>
          <text class="user-phone">手机号：{{ userInfo.phone || '未登录' }}</text>
        </view>
      </view>
    </view>

    <!-- 健康档案内容区 -->
    <view class="record-content">
      <!-- 既往病史 -->
      <view class="record-section">
        <view class="section-header">
          <uni-icons type="history" size="28" color="#007aff"></uni-icons>
          <text class="section-title">既往病史</text>
        </view>
        
        <view v-if="loadingHistory" class="loading-state">
          <text class="iconfont icon-loading"></text>
          <text class="loading-text">正在加载既往病史...</text>
        </view>
        
        <view class="section-content" v-else-if="appointmentOrders.length > 0">
          <view class="history-item" v-for="(item, index) in appointmentOrders" :key="index">
            <text class="disease-name">{{ item.department }} - {{ item.doctor }} ({{ item.doctor_title }})</text>
            <text class="diagnose-date">就诊日期：{{ item.date }}</text>
            <text class="disease-desc">就诊时间：{{ item.time }}</text>
            <text class="disease-desc">就诊人：{{ item.patient_name }} ({{ item.patient_phone }})</text>
          </view>
        </view>
        
        <view class="empty-section" v-else>
          <text>暂无既往病史记录</text>
        </view>
      </view>

      <!-- 疫苗接种史 -->
      <view class="record-section">
        <view class="section-header">
          <uni-icons type="shield" size="28" color="#722ed1"></uni-icons>
          <text class="section-title">疫苗接种史</text>
        </view>
        
        <view class="section-content" v-if="vaccinations.length > 0 && !loading">
          <view class="vaccine-item" v-for="(item, index) in vaccinations" :key="index">
            <text class="vaccine-name">{{ item.vaccine }}</text>
            <text class="dose">第{{ index+1 }}剂</text>
            <text class="vaccine-date">接种日期：{{ item.date +' ' +item.time }}</text>
            <text class="vaccine-location">接种地点：{{ item.clinic }}</text>
          </view>
        </view>
        
        <view v-if="loading" class="loading-state">
          <text class="iconfont icon-loading"></text>
          <text class="loading-text">正在加载接种记录...</text>
        </view>
        
        <view class="empty-section" v-else-if="!loading">
          <text>暂无更多记录</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/api/index.js' // 导入API模块

export default {
  data() {
    return {
      // 用户基本信息
      userInfo: {
        name: "",
        phone: ""
      },
      
      appointmentOrders: [],
      loadingHistory: false,
      vaccinations: [],
      loading: false
    };
  },
  
  mounted() {
    this.getUserDataFromStorage();
    this.getVaccinationHistory();
    this.getAppointmentOrders();
  },
  
  methods: {
    // 从本地存储获取用户数据
    getUserDataFromStorage() {
      try {
        const userInfo = uni.getStorageSync('userInfo');
        if (userInfo) {
          // 如果userInfo是JSON字符串，需要解析
          const parsedUserInfo = typeof userInfo === 'string' ? JSON.parse(userInfo) : userInfo;
          this.userInfo = parsedUserInfo;
          console.log('从本地存储获取用户信息成功:', this.userInfo);
        } else {
          console.log('本地存储中未找到用户信息，使用默认数据');
        }
      } catch (error) {
        console.error('获取本地存储的用户数据异常:', error);
      }
    },
    
    // 获取预约挂号订单数据
    async getAppointmentOrders() {
      this.loadingHistory = true;
      try {
        const res = await api.getAppointmentOrders();
        console.log('预约挂号订单API返回数据:', res);
        
        if (res.code === 200 && res.data) {
          this.appointmentOrders = res.data;
          console.log('获取的预约订单数量:', res.data.length);
        }
      } catch (error) {
        console.error('获取预约挂号订单数据失败:', error);
      } finally {
        this.loadingHistory = false;
      }
    },
    
    // 获取疫苗接种史数据（已完成的疫苗预约订单）
    async getVaccinationHistory() {
      this.loading = true;
      try {
        const res = await api.getVaccineAppointments();
        console.log('疫苗预约API返回数据:', res);
        
        if (res.code === 200 && res.data) {
          // 筛选出已完成状态（状态为3）的订单
          const completedOrders = res.data.filter(order => order.status === 3);
          this.vaccinations=completedOrders    
          console.log('已完成的订单数量:', completedOrders);
        }
      } catch (error) {
        console.error('获取疫苗接种史数据失败:', error);
      } finally {
        this.loading = false;
      }
    },
    
    // 返回上一页
    back() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

// 用户信息卡片
.user-info-card {
  background-color: #fff;
  padding: 40rpx;
  margin-bottom: 0;
  border-radius: 0;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

// 个人资料头部
.profile-header {
  display: flex;
  align-items: center;
  padding-bottom: 20rpx;
}

// 头像样式
.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 30rpx;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  
  image {
    width: 100%;
    height: 100%;
  }
}

// 用户详情
.user-details {
  flex: 1;
  min-width: 0;
}

// 用户名
.user-name {
  font-size: 40rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
  line-height: 1.2;
}

// 用户手机号
.user-phone {
  font-size: 32rpx;
  color: #666;
  display: block;
  line-height: 1.2;
}

// 记录内容区
.record-content {
  padding: 0 20rpx 120rpx;
}

// 记录区块通用样式
.record-section {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 25rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 25rpx;
    padding-bottom: 15rpx;
    border-bottom: 1rpx solid #eee;
    
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-left: 15rpx;
    }
  }
  
  .section-content {
    .history-item, .allergy-item, .medication-item, .vaccine-item {
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
    }
    
    .disease-name, .allergen, .medicine-name, .vaccine-name {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .diagnose-date, .reaction, .usage, .dose {
      font-size: 24rpx;
      color: #666;
      display: block;
      margin-bottom: 5rpx;
    }
    
    .disease-desc, .period, .vaccine-date, .vaccine-location {
      font-size: 24rpx;
      color: #888;
      display: block;
    }
  }
  
  .empty-section {
    padding: 50rpx 0;
    text-align: center;
    color: #999;
    font-size: 26rpx;
  }
  
  .loading-state {
    padding: 50rpx 0;
    text-align: center;
    
    .icon-loading {
      font-size: 48rpx;
      color: #007aff;
      display: block;
      margin-bottom: 15rpx;
      animation: rotate 1s linear infinite;
    }
    
    .loading-text {
      font-size: 26rpx;
      color: #999;
    }
  }
  
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
}
</style>